<template>
  <view class="router-view container bcl-active">
     <view class="mb-30">
        <view class="uni-label-list uni-label-list-auto mt-20">
          <view
            class="uni-label pointer pointer-filter bcl-white"
           :class="{'uni-label-selected':indexList.indexOf(item.id)>-1}"
            v-for="(item, index) in list"
            :key="item.id"
            @tap="change(item.id)"
          >
            <text class="hide-text-2">{{ item.name }}</text>
          </view>
        </view>
      </view>

    <!-- <view class="foutbox">
      <view class="box_item"  v-for="(item, index) in list" :key="index" @click="checkBox($event, item)">
        <checkbox class="check" style="border:0;" value="{item.id}" :checked="item.checked"></checkbox>
        <view class="text">{{item.name}}</view>
      </view>
    </view> -->

    <!-- 底部栏 -->
    <view class="uni-footer box border border-top text-center bcl-white">
      <!-- <view class="box-1 pointer" @tap="clear">清空</view> -->
      <view class="box-1 bcl-main cl-white pointer pointer-filter" @tap="submit"
        >完成</view
      >
    </view>
    
    <!-- 发布按钮 -->
    <div
      class="send-btn pointer"
      @click="toSendPage"
    >
      <image
        src="/static/images/release_1.png"
        style="width: 50px; height: 50px;"
      ></image>
    </div>
  </view>
</template>

<script>
import { listFilter,category,skillSave,userSkillson } from "@/apis/app";

export default {

  data() {
    return {
      filter: uni.getStorageSync("taskFilter"),
      result: {
        type: "",
        status: "",
        province: "",
        category:""
      },
      activeClass: -1,
      list:[],
      ids:[],
      indexList:[]
    };
  },

  onLoad() {
    this.result = uni.getStorageSync("currentTaskFilter") || this.result; // 初始化筛选
    this.listFilter();
    this.category();
    this.userSkillsondata()
  },

  methods: {
    
    toSendPage() {
      
      let url = uni.getStorageSync("userInfo")
      if(url){
          uni.navigateTo({
            url:'/pages/index/release/submit?type=1'
          });

      }else{
        
          uni.navigateTo({
            url:'/user/login'
          });
      }
    },
    change(index){
        let arrIndex = this.indexList.indexOf(index);
        if (arrIndex > -1){
          this.indexList.splice(arrIndex,1)
        }else{
          this.indexList.push(index)
        }
        console.log(this.indexList)
      },
    async category(){
        let { data } = await category();
        data.forEach(function(item,index){
            item.checked=false;
            item.cal=index+1;
        })
        this.list = data;
        console.log(data)
    },
    
    async userSkillsondata(){
        let { data } = await userSkillson();
        if(data.length >= 1){
          this.indexList =  data
        }
        console.log(this.indexList)
    },
    

    changeCategory(item,index) {
      this.activeClass = index;
    },
    //勾选添加按钮
    checkBox(e, item) {
        console.log(item)
          let that = this;
          let box = (item.checked = !item.checked);
          if(item.checked == true){
            this.ids.push(item.id);
          }
          if(item.checked == false){
            let im = item.id;
            this.ids.forEach(function(item,index,arr){
              console.log(item)
              if(item == im) {
                  arr.splice(index, 1);
              }
            })
          }
          // console.log(this.ids)
      },
    /*
     * 筛选列表
     */
    async listFilter() {
      if (this.filter) return false;

      let { code, data } = await listFilter({
        type: 1,
      });
     

      if (code == 200) {
        // 追加全部选项
        data.taskType.unshift({
          id: "",
          name: "全部",
        });

        data.status.unshift({
          status: "",
          message: "全部",
        });

        data.province.unshift({
          id: "",
          name: "全部",
        });

        this.filter = data;
        uni.setStorageSync("taskFilter", this.filter);
      }
    },

    /*
     * 筛选列表
     */
    async submit() {
      let data  = this.indexList;
      console.log(data)
      let {code, message} = await skillSave({skills:data});
      if (code === 200){
        uni.navigateBack();
      }
    },

    /*
     * 高亮已筛选
     */
    lightFilter() {
      this.filter.forEach((item) => {
        item.list.forEach((sitem) => {
          if (this.currentfilter.map((item) => item.name).includes(sitem.name))
            this.onLabelTap(sitem);
        });
      });
    },

    changeType(item) {
      this.result.type = item.id;
    },

    changeStatus(item) {
      this.result.status = item.status;
    },

    changeProvince(item) {
      this.result.province = item.id;
    },

    // 清空
    clear() {
      this.result = {
        type: "",
        status: "",
        province: "",
      };
    },

    onLabelTap(item) {
      if (typeof item.selected == "undefined") {
        this.$set(item, "selected", true);
      } else {
        item.selected = !item.selected;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.router-view {
  padding-bottom: 120upx;
}
.box_item{
  width:96px;
  // min-height: 107px;
  // border-radius: 20%;
  padding:10px 0;
  text-align: center;
  background:  #ffffff;
  font-size: 14px;
  text-align: center;
  font-weight: bold;
  position: relative;
  display: inline-block;
  margin: 10px;
  border:1px solid #e7e7e7;
  color:#3b3b3b;
  float:left;
    .check{
      position: absolute;
      // top:-5px;
      // left:10px;
      right:0;
      top:0;
      border:0;
    }
  
    .text{
      min-width:56px;
      // min-height: 68px;
    }
  
}
.col1{
  background: #e034ff;
}
.col2{
  background: #e61717;
}
.col3{
  background: #e066ff;
}
.col4{
  background: #d5e617;
}
.col5{
  background: #e69017;
}
.col6{
  background: #7de617;
}
.col7{
  background: #17e69d;
}
.col8{
  background: #17dfe6;
}
.col9{
  background: #17a4e6;
}
.col10{
  background: #e6b517;
}
.col11{
  background: #8b17e6;
}
.col12{
  background: #4217e6;
}

   .on{
                 color: red;
             }
</style>
